<template>
  <div class="container" ref="mainCon">
    <el-row
      class="toolbar searchInputWidth"
      style="padding-bottom: 0; padding-top: 24px !important"
    >
      <el-form :inline="true" :model="filterField" ref="searchConditions">
        <el-col :lg="8" :xl="6">
          <el-form-item label="接件日期" class="row-padding-bottom">
            <timeSelection
              @getStartTimeValue="getStartTimeValue"
              @getEndTimeValue="getEndTimeValue"
            ></timeSelection>
          </el-form-item>
        </el-col>
        <!-- <el-col :lg="8" :xl="6"> -->
        <el-form-item label="">
          <el-button
            type="primary"
            icon="icon iconfont iconchazhao1"
            @click="searchList"
            class="searchBtn"
          >
            <span>搜索</span>
          </el-button>
          <!-- <el-button type="primary" class="createSalaryBut"  @click="downLoadFile()">导出</el-button> -->
        </el-form-item>
        <el-form-item>
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icondaochu"
            v-sdc
            @click="exportList"
          >
            <span class="opetareText">导出</span>
          </el-button>
          <!-- <exportBtn :dataLen="tableList.length" :filterField="filterField" api="api-r/otherComplaint/excelExport"></exportBtn> -->
        </el-form-item>
        <!-- <el-form-item>
                        <div class="uploadBox">
                            <el-button class="commonBut saveBtn funComBut" @click="goFile">
                                <span class="opetareText">导入</span>
                            </el-button>
                            <div class="upLoadDom" style="display: none">
                                <form id="waterImportBox">
                                <input
                                    type="file"
                                    ref="files"
                                    id="waterImportExcel"
                                    name="file"
                                    @change="waterImportfileChange"
                                />
                                </form>
                            </div>
                        </div>
                       
                    </el-form-item> -->
        <!-- </el-col> -->
      </el-form>
    </el-row>
    <div class="spacing"></div>
    <div
      ref="tableBox"
      :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
    >
      <el-table
        ref="tableBox1"
        :max-height="tableHeight"
        :data="tableList"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
        border
        show-summary
      >
        <el-table-column
          prop="receiveUnit"
          label="接件处室"
          :formatter="formatTd"
        ></el-table-column>
        <!-- <el-table-column
          prop="sex"
          label="所属行业"
          :formatter="formatTd"
        ></el-table-column> -->
        <!-- <el-table-column
          prop="idcard"
          label="办结件（件）"
          :formatter="formatTd"
        >
        </el-table-column> -->
        <el-table-column
          prop="petitionNum"
          label="上访人数"
          align="center"
          :formatter="formatTd"
        >
        </el-table-column>
        <el-table-column
          prop="tatol"
          label="案件数"
          align="center"
          :formatter="formatTd"
        >
        </el-table-column>
        <el-table-column label="操作" align="left" fixed="right" width="110">
          <template slot-scope="scope">
            <el-link type="primary" @click="toDetail(scope.$index, scope.row)"
              >查看</el-link
            >
          </template>
        </el-table-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无相关信息"></emptyTable>
        </div>
      </el-table>
      <!-- <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
      ></Pagination> -->
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
export default {
  name: 'caseBurst', //昆明案件导入-突出事件
  data() {
    return {
      //表格数据
      tableList: [],
      requestUrl: '/api-r/otherComplaint/page',
      areaId: '',
      //搜索条件
      filterField: {
        receiveStartDate: '', //开始时间
        receiveEndDate: '', //结束时间
      },
      isShow: false,
      loading: true, //列表加载
      tableHeight: null,
      hiddleToolBar: false,
    }
  },
  created() {
    // this.$nextTick(function () {
    //   this.$refs.pagination.getTableListData();
    // });
    this.searchList()
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      // this.$refs.pagination.getTableListData();
      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 86
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 28 + 'px')
      }

      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 86
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
  },
  methods: {
    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.receiveStartDate = val
      } else {
        this.filterField.receiveStartDate = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.receiveEndDate = val
      } else {
        this.filterField.receiveEndDate = ''
      }
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      // this.$refs.pagination.getTableListData();
      this.axios.post(this.requestUrl, this.filterField).then((res) => {
        if (!res.data.hasError) {
          if (res.data.result) {
            this.tableList = res.data.result
            if (this.tableList.length < 1) {
              this.isShow = true
            }
          } else {
            this.tableList = []
          }
          this.loading = false
          if (this.tableList.length < 1) {
            this.isShow = true
          }
        } else {
          this.$message({
            type: 'warning',
            message: res.data.errorMsg,
          })
        }
      })
    },
    handleScroll(e) {
      this.$nextTick(function () {
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          // this.tableHeight = this.$refs.mainCon.getBoundingClientRect().height - 84
          this.tableHeight = window.innerHeight - 230

          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
    toDetail(index, item) {
      var query = {
        activeName: '3',
        currentTabComponent: 'emergencies',
        ReceiveUnit: item.receiveUnit,
      }

      this.$router.push({
        path: '/home/kMCaseComplaint/otherComplaintsTab',
        name: 'otherComplaintsTab',
        query: query,
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/kMCaseComplaint/otherComplaintsTab',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    exportList() {
      if (this.tableList.length > 0) {
        window.location.href =
          common.commonApi +
          'api-r/otherComplaint/excelExport?receiveStartDate=' +
          this.filterField.receiveStartDate +
          '&receiveEndDate=' +
          this.filterField.receiveEndDate
        // "&access_token=" +
        // localStorage.getItem("access_token");
      } else {
        this.$message({
          type: 'warning',
          message: '无数据导出',
        })
      }
    },
  },
}
</script>

<style scoped lang="less">
.container {
  // padding:24px;
  .uploadBox {
    position: relative;
    .uploadImg {
      width: 96px;
      height: 36px;
      padding: 0px;
      color: #009588;
      border: 1px solid #009588;
      cursor: pointer;
    }
    .upLoadDom {
      position: absolute;
      width: 96px;
      height: 36px;
      top: 0;
      left: 0;
      opacity: 0;
      line-height: 0px;
      form {
        input {
          width: 96px;
          height: 36px;
          line-height: 0px;
          cursor: pointer;
        }
      }
    }
  }
}
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
  // font: bold 18px/67px Microsoft YaHei;
}
.mainCon {
  top: 198px;
}

.createSalaryBut {
  background: #009588;
  border: 1px solid #009588;
  padding: 10px 23px;
  margin-left: 12px;
  &:hover {
    opacity: 0.8;
  }
}
@media only screen and (max-width: 1366px) {
  /deep/.searchInputWidth .el-form--inline .el-form-item__label {
    width: 80px;
  }
}
@import '../../../static/css/filterArea.less';
</style>
